{extend name='admin@public/main'}

{block name='style'}
<style>
    body{min-width:500px}
    #news_box{position:relative;}
    #news_box .news_item{top:0;left:0;width:232px;margin:10px;padding:5px;cursor:pointer;position:relative;border:1px solid #ccc;box-sizing:content-box;}
    #news_box .news_item:hover,
    #news_box .news_item.active{box-shadow:1px 0 10px #09c;border-color:#09c;}
    #news_box .news_item .news_articel_item{width:100%;height:150px;overflow:hidden;position:relative;background-size:100%;background-position:center center;}
    #news_box .news_item .news_articel_item p{bottom:0;width:100%;color:#fff;padding:5px;max-height:5em;font-size:12px;overflow:hidden;position:absolute;text-overflow:ellipsis;background:rgba(0, 0, 0, 0.7);}
    #news_box .news_item .news_articel_item.other{height:50px;padding:5px 0;}
    #news_box .news_item .news_articel_item .left-image{width:50px;height:50px;float:left;overflow:hidden;position:relative;background-size:100%;background-position:center center;}
    #news_box .news_item .news_articel_item .right-text{float:left;width:180px;padding-right:10px;overflow:hidden;text-overflow:ellipsis;}
    #news_box .news_item .hr-line-dashed:last-child{display:none}
    #news_box .hr-line-dashed{margin:6px 0 1px 0}
    .page-style{bottom:0;width:100%;padding:0 10px;position:fixed;background:#fff;height:50px}
    .page-style .pagination,.page-style .pagination-trigger{margin:10px 0!important;padding:0 10px!important;}
</style>
{/block}

{block name="body"}
<div class="news-container" id='news_box'>
   {foreach $list as $vo}
    <div class="news_item" data-news-id="{$vo.id}">
       {foreach $vo.articles as $k => $v}
       {if $k < 1}
        <div class='news_articel_item' style='background-image:url("{$v.local_url}")'>
           {if $v.title}<p>{$v.title}</p>{/if}
        </div>
        <div class="hr-line-dashed"></div>
       {else}
        <div class='news_articel_item other'>
            <div class='right-text'>{$v.title}</div>
            <div class='left-image' style='background-image:url("{$v.local_url}");'></div>
        </div>
        <div class="hr-line-dashed"></div>
       {/if}
       {/foreach}
    </div>
   {/foreach}
    <div style="clear:both"></div>
   {if empty($list)}<p class="help-block text-center well">没 有 记 录 哦！</p>{/if}
</div>
<div style="height:50px"></div>
<div class="page-style">{if isset($page)}{$page|raw}{/if}</div>
{/block}


{block name="script"}
<script>
    require(['jquery.masonry'], function (Masonry){
        (function () {
            var $ = layui.$;
            var container = document.querySelector('#news_box');
            var msnry = new Masonry(container,{itemSelector:'.news_item', columnWidth:0});
            msnry.layout();
            /* 事件处理 */
            $('.news_item').on('mouseenter', '.news-box', function (){
                $(this).addClass('active');
            }).on('mouseleave', '.news-box', function (){
                $(this).removeClass('active');
            });
            var seletor = '[name="{$Think.get.field|decode|default=0}"]';
            if (seletor){
                $('[data-news-id]').on('click', function (){
                    window.top.$(seletor).val($(this).attr('data-news-id')).trigger('change');
                    parent.layer.close(parent.layer.getFrameIndex(window.name))
                });
            }
            // 分页事件处理
            $('body').off('change', '.pagination-trigger select').on('change', '.pagination-trigger select', function (){
                var urls = this.options[this.selectedIndex].getAttribute('data-url').split('#');
                urls.shift();
                window.location.href = urls.join('#');
            }).off('click', '[data-open]').on('click', '[data-open]', function (){
                var url = this.getAttribute('data-open');
                window.location.href = url;
            });
        })();
    });
</script>
{/block}